<template>
  <div class="loading-wave">
    <div class="wave-wrap">
      <div class="wave wave1"></div>
      <div class="wave wave2"></div>
      <div class="wave wave3"></div>
      <div class="wave wave4"></div>
      <div class="wave wave5"></div>
      <div class="wave wave6"></div>
      <div class="wave wave7"></div>
      <div class="wave wave8"></div>
      <div class="wave wave9"></div>
      <div class="wave wave10"></div>
      <div class="wave wave11"></div>
      <div class="wave wave12"></div>
      <div class="wave wave13"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingWave',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
@keyframes stretchdelay {
  0% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(2);
  }
  100% {
    transform: scaleY(0.2);
  }
}
.loading-wave {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  .wave-wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .wave {
      width: 8rpx; //一般在父级组件使用样式穿透进行覆盖
      height: 50rpx; //一般在父级组件使用样式穿透进行覆盖
      background-color: #fff; //一般在父级组件使用样式穿透进行覆盖
      animation: stretchdelay 1.6s infinite ease-in-out;
      &.wave1 {
        animation-delay: 0s;
      }
      &.wave2 {
        animation-delay: 0.2s;
      }
      &.wave3 {
        animation-delay: 0.4s;
      }
      &.wave4 {
        animation-delay: 0.6s;
      }
      &.wave5 {
        animation-delay: 0.8s;
      }
      &.wave6 {
        animation-delay: 1s;
      }
      &.wave7 {
        animation-delay: 1.2s;
      }
      &.wave8 {
        animation-delay: 1.4s;
      }
      &.wave9 {
        animation-delay: 1.6s;
      }
      &.wave10 {
        animation-delay: 1.8s;
      }
      &.wave11 {
        animation-delay: 2s;
      }
      &.wave12 {
        animation-delay: 2.2s;
      }
      &.wave13 {
        animation-delay: 2.4s;
      }
    }
  }
}
</style>
